import { createRouter, createWebHistory } from 'vue-router'
import NProgress from 'nprogress'

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/tabbar',
    meta:{
      title:'导航栏'
    },
    component: () => import('@/components/Tabbar.vue'),
    children: [{
      path: '/my',
      name: 'my',
      meta:{
        title:'我的界面'
      },
      component: () => import('@/views/My/My.vue')
    }, {
      path: '/home',
      name: 'home',
      meta:{
        title:'主页'
      },
      component: () => import('@/views/Home/Home.vue')
    },
    {
      path: '/note/add',
      name: 'addNote',
      meta:{
        title:'新增游记界面'
      },
      component: () => import('@/views/AddNote/AddNote.vue')
    },]
  },

  {
    path: '/setting',
    name: 'setting',
    meta:{
      title:'设置界面'
    },
    component: () => import('@/views/Setting/Setting.vue')
  },
  {
    path: '/login',
    name: 'login',
    meta:{
      title:'登录界面'
    },
    component: () => import('@/views/Identify/Login.vue')
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('@/views/Identify/Register.vue')
  },

  {
    path: '/coupe',
    name: 'coupe',
    meta:{
      title:'鸟类词典'
    },
    component: () => import('@/views/Coupe/Coupe.vue')
  },
  {
    path: '/plan',
    name: 'plan',
    meta:{
      title:'观鸟规划'
    },
    component: () => import('@/views/Plan/Plan.vue')
  },
  {
    path: '/distribution',
    name: 'distribution',
    meta:{
      title:'南昌鸟类分布'
    },
    component: () => import('@/views/Distribution/Distribution.vue')
  },
  {
    path: '/note/detail/:id',
    name: 'noteDetail',
    meta:{
      title:'笔记详情'
    },
    component: () => import('@/views/NoteDetail/NoteDetail.vue')
  },
  {
    path: '/bird/detail/:id',
    name: 'birdDetail',
    meta:{
      title:'鸟类详情'
    },
    component: () => import('@/views/BirdDetail/BirdDetail.vue')
  },
  {
    path: '/classify/:mu/:ke',
    name: 'classify',
    meta:{
      title:'鸟类词典科+目'
    },
    component: () => import('@/views/Coupe/ClassifyBirds.vue')
  },
  {
    path: '/focus',
    name: 'focus',
    meta:{
      title:'关注'
    },
    component: () => import('@/views/My/Focus.vue')
  },
  {
    path: '/fans',
    name: 'fans',
    component: () => import('@/views/My/Fans.vue')
  },
  {
    path: '/rank',
    name: 'rank',
    component: () => import('@/views/Rank/Rank.vue')
  },
  {
    path: '/user/:id',
    name: 'userDetail',
    component: () => import('@/views/UserDetail/UserDetail.vue')
  },
  {
    path: '/404',
    name: 'notfount',
    component: () => import('@/views/404.vue')
  },
  {
    // path: "*", // 这样用，vue3已经不支持，得下面的方式
    path: "/:pathMath(.*)", // 此处需特别注意置于最底部
    redirect: "/404"
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, form, next) => {
  NProgress.start()
  if (to.path === '/login'||to.path === '/register') return next();
  const token = sessionStorage.getItem("token")
  if (!token) return next('/login');
  next();
});
router.afterEach(() => {
  NProgress.done()
})

export default router
